<template>
	<div class="message">
		<div class="message_bg">
			<div class="width_1200">
				<div class="message_box">
					<div class="message_nav">
						<a :href="item.link" class="nav_item transition_6" v-for="(item,index) in navList" :key="index">
							<div class="nav_icon transition_6" :class="item.icon"></div>
							<div class="nav_name transition_6">{{item.name}}</div>
						</a>
					</div>
					<div class="message_notice">
						<div class="notice">
							<div class="notice_icon fa fa-volume-up"></div>
							<img src="../assets/images/volume.gif" alt="" class="notice_img">
							<div class="notice_name">公告：<a :href="noticeData.link"><span>{{noticeData.name}}</span></a></div>
						</div>
					</div>
					<div class="message_news" @mouseover="newsOver" @mouseout="newsOut">
						<div class="news transition_6">
							<div class="news_icon fa fa-bell"></div>
							<div class="news_name transition_6">消息</div>
							<!-- alert -->
							<transition name="slide-fade">
								<div class="news_alert" v-show="isNews">
									<div class="news_alert_tab">
										<div class="news_alert_tab_item" :class="{'news_alert_tab_active':!isSystem}" @click="systemTab(false)">系统通知</div>
										<div class="news_alert_tab_item" :class="{'news_alert_tab_active':isSystem}" @click="systemTab(true)">系统公告</div>
									</div>
									<div class="news_alert_content">
										<div class="news_alert_content_item" v-show="!isSystem">
											<!-- 空 -->
											<div class="empty" v-if="newsData.noticeList.length==0">
												<div class="empty_icon"><span class="fa fa-thermometer-empty"></span></div>
												<div class="empty_text">暂无消息</div>
											</div>
											<div v-else>
												<a href="#" class="news_alert_content_box" v-for="(item,index) in newsData.noticeList" :key="index">
													<div class="news_alert_content_box_icon fa fa-bell-o"></div>
													<div class="news_alert_content_box_content">
														<div class="news_alert_content_box_name line_one">通知</div>
														<div class="news_alert_content_box_time">2018-08-08</div>
													</div>
												</a>
											</div>
											<a href="#" class="news_alert_more">查看更多1</a>
										</div>
										<div class="news_alert_content_item" v-show="isSystem">
											<!-- 空 -->
											<div class="empty" v-if="newsData.newsList.length==0">
												<div class="empty_icon"><span class="fa fa-thermometer-empty"></span></div>
												<div class="empty_text">暂无消息</div>
											</div>
											<div v-else>
												<a href="#" class="news_alert_content_box" v-for="(item,index) in newsData.newsList" :key="index">
													<div class="news_alert_content_box_icon fa fa-volume-up"></div>
													<div class="news_alert_content_box_content">
														<div class="news_alert_content_box_name line_one">公告</div>
														<div class="news_alert_content_box_time">2018-08-08</div>
													</div>
												</a>
											</div>
											<a href="#" class="news_alert_more">查看更多2</a>
										</div>
									</div>
								</div>
							</transition>
						</div>
					</div>
				</div>
			</div><!-- width_1200 -->
		</div>
	</div>
</template>

<script>
export default {
  transition: 'page',
  data(){
  	return{
  		navList:[{
  			icon:'fa fa-cube fa-fw',
  			name:'OTCBank生态',
  			link:'http://liu12fei08fei.github.io/',
  		},{
  			icon:'fa fa-handshake-o',
  			name:'OTCBank合伙人',
  			link:'http://liu12fei08fei.github.io/',
  		},{
  			icon:'fa fa-podcast',
  			name:'OTC投票',
  			link:'http://liu12fei08fei.github.io/',
  		},{
  			icon:'fa fa-diamond fa-fw',
  			name:'OTC挖矿',
  			link:'http://liu12fei08fei.github.io/',
  		},{
  			icon:'fa fa-globe fa-fw',
  			name:'OTCBank.COM',
  			link:'http://liu12fei08fei.github.io/',
  		}],
  		noticeData:{
  			name:'OTCBank.com关于上线通知公告',
  			link:'http://liu12fei08fei.github.io/',
  		},
  		isNews:false,
  		isSystem:true,
  		newsData:{
  			noticeList:[],
  			newsList:[1,2],
  		},
  	}
  },
  methods:{
  	newsOver(){
  		this.isNews = true;
  	},
  	newsOut(){
  		this.isNews = false;
  	},
  	systemTab(isTab){
  		console.log(isTab)
  		this.isSystem=isTab;
  	},
  },
  created(){}
}
</script>

<style scoped>
@import url("../assets/css/components/message.css");
</style>